<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>24 本科 3 班 康建辉 的网站！</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .team-section {
            padding: 30px 0;
            background-color: #f8f9fa;
        }

        .section-title {
            margin-bottom: 60px;
            position: relative;
            color: #2c3e50;
            font-weight: 700;
        }

        .section-title:after {
            content: "";
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: #3498db;
        }

        .team-card {
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            margin-bottom: 30px;
            border: none;
        }

        .team-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .team-img {
            position: relative;
            overflow: hidden;
        }

        .team-img img {
            width: 100%;
            height: 270px;
            object-fit: cover;
            transition: all 0.3s ease;
        }

        .team-card:hover .team-img img {
            transform: scale(1.05);
        }

        .team-info {
            padding: 25px 15px;
            text-align: center;
        }

        .team-info h4 {
            font-weight: 700;
            margin-bottom: 5px;
            color: #2c3e50;
        }

        .team-info p {
            color: #7f8c8d;
            font-size: 14px;
            margin-bottom: 15px;
        }

        .btn-member {
            background-color: #3498db;
            border-color: #3498db;
            border-radius: 50px;
            padding: 8px 20px;
            font-weight: 500;
            transition: all 0.3s;
        }

        .btn-member:hover {
            background-color: #2980b9;
            border-color: #2980b9;
            transform: translateY(-2px);
        }

        .modal-header {
            background-color: #3498db;
            color: white;
            border-bottom: none;
        }

        .modal-title {
            font-weight: 600;
        }

        .btn-close {
            filter: invert(1);
        }

        .modal-body img {
            border-radius: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <!-- 团队介绍部分 -->
    <section class="team-section">
        <div class="container">
            <div class="d-flex align-items-center justify-content-between mb-4">
                <img src="./img/校徽and名字.png" style="width: 200px; height: 50px;" alt="校徽">
                <div class="text-center flex-grow-1">
                    <h2 class="section-title m-0">我们优秀的团队</h2>
                </div>
                <div style="width: 200px;"></div>
            </div>

            <div class="row justify-content-center">
                <div class="col-lg-8 text-center">
                    <p class="lead mb-5">专业、创新、协作是我们的核心价值观</p>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 团队成员1 -->
            <div class="col-md-6 col-lg-3 px-5">
                <div class="team-card">
                    <div class="team-img">
                        <img src="./img/kang.jpg" alt="团队成员" class="img-fluid">
                    </div>
                    <div class="team-info">
                        <h4>康建辉</h4>
                        <p>学号 : 2024026228</p>
                        <button type="button" class="btn btn-primary btn-member" data-bs-toggle="modal"
                            data-bs-target="#member1Modal">
                            查看详情
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="team-card">

                    <ul class="team-list">
                        <li>
                            <div class="team-title">负责页面：</div>
                            <div class="team-desc">
                                - 登录页面设计(login.html)<br />
                                - 注册页面设计(register.html)<br />
                                - 团队介绍页面(group.html)<br />
                                - 作品展示页面(works.html)
                            </div>
                        </li>
                        <li>
                            <div class="team-title">主要任务：</div>
                            <div class="team-desc">
                                - 网站整体架构设计<br />
                                - 网页交互实现<br />
                                - 响应式布局优化<br />
                                - 表单验证功能开发<br />
                                - 文化内容收集整理<br />
                            </div>
                        </li>
                        <li>
                            <div class="team-title">遇到的问题及解决方法：</div>

                            <div class="accordion" id="accordionExample">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingOne1">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseOne1"
                                            aria-expanded="false" aria-controls="collapseOne">
                                            问题1：在点击登录时，页面不进行跳转，form的action属性写了跳转页面。
                                        </button>
                                    </h2>
                                    <div id="collapseOne1" class="accordion-collapse collapse"
                                        aria-labelledby="headingOne1" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <strong>因为checkPwd函数内部不一致和call的使用问题：</strong>
                                            <p>使用 pwd.value 获取值，但同时又用 this.focus。应该统一使用 this.value 或 pwd.value，checkPwd
                                                函数内部没有使用 this 来获取值</p>

                                            <strong>为了开发方便，注释了验证代码，直接点击btn登录
                                            </strong>
                                            <p>需要使用验证登录，需要打开注释代码</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingTwo">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseTwo1"
                                            aria-expanded="false" aria-controls="collapseTwo">
                                            问题2：因为使用的框架，点击团队介绍页面的查看详情和点击问题，两个人会同使用一个，或者同时打开。
                                        </button>
                                    </h2>
                                    <div id="collapseTwo1" class="accordion-collapse collapse"
                                        aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <strong>观察代码，发现data-bs-target这个属性和对应着盒子的id，改变相应的id后解决了这个问题</strong>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingThree">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseThree1"
                                            aria-expanded="false" aria-controls="collapseThree">
                                            问题3：在开发时因为使用的bootstrap框架，页面布局，还有各种属性不清楚干什么。比如团队介绍页面的手风琴折叠面板
                                        </button>
                                    </h2>
                                    <div id="collapseThree1" class="accordion-collapse collapse"
                                        aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <strong>想要方框不变亮，在class样式里面添加collapsed，在collapseTwo盒子的class添加show就可以自动展开。遇到问题一般先观察代码，其次查阅文档。不敢轻易修改css样式</strong>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingThree">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseFour1"
                                            aria-expanded="false" aria-controls="collapseThree">
                                            问题4：模拟框无法正常显示
                                        </button>
                                    </h2>
                                    <div id="collapseFour1" class="accordion-collapse collapse"
                                        aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <strong>查询相关文档，是因为引入的booststrap的css样式的问题，我把bootstrap.min.css和bootstrap同时引入，发生了冲突。了解了一下生产环境首选
                                                bootstrap.min.css，开发阶段可选 bootstrap.css。前者体积小，加快页面加载速度。对用户体验更友好。</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </li>
                    </ul>
                </div>
            </div>

            <!-- 团队成员2 -->
            <div class="col-md-6 col-lg-3 px-5">
                <div class="team-card">
                    <div class="team-img">
                        <img src="./img/li.jpg" alt="团队成员" class="img-fluid">
                    </div>
                    <div class="team-info">
                        <h4>李育松</h4>
                        <p>学号 : 2024026222</p>
                        <button type="button" class="btn btn-primary btn-member" data-bs-toggle="modal"
                            data-bs-target="#member2Modal">
                            查看详情
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="team-card">

                    <ul class="team-list">
                        <li>
                            <div class="team-title">负责页面：</div>
                            <div class="team-desc">
                                - 首页设计(index.html)<br />
                                - 内容详情页(content.html)<br />
                                - 任务管理页面(toDoList.html)<br />
                                - 列表页面(list.html)
                            </div>
                        </li>
                        <li>
                            <div class="team-title">主要任务：</div>
                            <div class="team-desc">
                                - 网站整体架构设计<br />
                                - 网页交互实现<br />
                                - 响应式布局优化<br />
                                - 文化内容收集整理<br />
                            </div>
                        </li>
                        <li>
                            <div class="team-title">遇到的问题及解决方法：</div>
                            <div class="accordion" id="accordionExample">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingOne">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseOne2"
                                            aria-expanded="false" aria-controls="collapseOne">
                                            问题1：在处理，list列表和index列表的关系的时候，很不理解。
                                        </button>
                                    </h2>
                                    <div id="collapseOne2" class="accordion-collapse collapse"
                                        aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <strong>先开始向小组成员请教，小组成员表示不理解并且向其他组成员请教，
                                                后来其他组成员也不理解，于是就向老师请教。</strong>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingTwo">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseTwo2"
                                            aria-expanded="false" aria-controls="collapseTwo">
                                            问题2：不理解如何在轮播图中如何插入多张图片，因为没有引入图片文件样式（.png）的代码。
                                        </button>
                                    </h2>
                                    <div id="collapseTwo2" class="accordion-collapse collapse"
                                        aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <strong>从csdn知道，要想显示图片，item循环的List中就必须要是个图片的List。因此我们在data中定义一个图片的List集合。</strong>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingThree">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseThree2"
                                            aria-expanded="false" aria-controls="collapseThree">
                                            问题3：首页的鼠标悬浮时，设置的transform动画效果不体现
                                        </button>
                                    </h2>
                                    <div id="collapseThree2" class="accordion-collapse collapse"
                                        aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <strong>通过网上查询和学习，发现是会因为类选择器越级添加到单个div上即可生效</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </li>
                    </ul>

                </div>
            </div>
        </div>
    </section>

    <!-- 康建辉的模态框 -->
    <div class="modal fade" id="member1Modal" tabindex="-1" aria-labelledby="member1ModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="member1ModalLabel">康建辉</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <img src="./img/kang.jpg" class="img-fluid" alt="康建辉">
                    <p class="mt-3">大家好，我是康建辉，现就读河北师范大学附属民族学院。通过本学期的学习，基本熟练掌握html，css,javascript。</p>
                    <p>在学习过程中老师用了许多学校的网站用来举例子，所以我们也打算做一个学校的网站。之前网上很火的“山河大学”就是我们的开发灵感</p>
                    <p>我们在这次开发中使用了两个框架bootstrap，Element UI来搭建我们项目</p>
                    <ul class="list-group list-group-flush mb-3">
                        <li class="list-group-item"><strong>班级：</strong>24级计算机科学与技术3班</li>
                        <li class="list-group-item"><strong>学号：</strong>2024026228</li>
                        <li class="list-group-item"><strong>联系方式：</strong>269227660@qq.com</li>
                    </ul>
                </div>
                <div class="modal-footer d-flex justify-content-center">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <!-- <button type="button" class="btn btn-primary">联系</button> -->
                </div>
            </div>
        </div>
    </div>

    <!-- 李育松的模态框 -->
    <div class="modal fade" id="member2Modal" tabindex="-1" aria-labelledby="member2ModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="member2ModalLabel">李育松</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <img src="./img/li.jpg" class="img-fluid" alt="李育松">
                    <p class="mt-3">大家好！我是李育松。我来自河北师范大学附属民族学院。“山河大学” 起初虽源于网友玩笑，
                        却反映出山东、山西、河南、河北四省民众对优质高等教育资源的强烈渴望。</p>
                    <p>设计网站主页，可在虚拟层面上回应这种期待，为大家提供一个寄托教育理想的空间，持续激发社会对高等教育资源均衡发展的关注与讨论。</p>
                    <ul class="list-group list-group-flush mb-3">
                        <li class="list-group-item"><strong>班级：</strong>24级计算机科学与技术3班</li>
                        <li class="list-group-item"><strong>学号：</strong>2024026222</li>
                        <li class="list-group-item"><strong>联系方式：</strong>2095475761@qq.com</li>
                    </ul>
                </div>
                <div class="modal-footer d-flex justify-content-center">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <!-- <button type="button" class="btn btn-primary">联系</button> -->
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS 和依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>